<template>
    <async-modal initHeight="600px" initWidth="1000px" :title="`预处理【${props.initMsg.row.label}】`" @update:visible="cancel">
        <template #modalBody>
            <!-- 禁用惰性渲染 lazy="false" -->
            <el-tabs v-model="activeName" type="border-card" class="demo-tabs1" @tab-click="handleClick1">
                <el-tab-pane label="启动限制" name="start" lazy>
                    <tab-check ref="refStart" :initMsg="subData.startCheck" :isRead="subData.isRead" :activeName="activeName" style="height: 100%;"/>
                </el-tab-pane>
                <el-tab-pane label="提示确认" name="Confirm" lazy>
                    <tab-check ref="refConfirm" :initMsg="subData.secondConfirm" :isRead="subData.isRead" :activeName="activeName" style="height: 100%;"/>
                </el-tab-pane>                 
            </el-tabs>
        </template>
        <template #modalFoot>
            <div class="event-button">
                <el-button type="primary" @click="onSubmit">确定</el-button>
                <el-button @click="cancel">取消</el-button>            
            </div>
        </template>        
    </async-modal>
</template>

<script setup lang="ts">
import AsyncModal from '@/components/Modal/index.vue';
import type { Dict } from '@/api/pub/type.ts';
import tabCheck from './tabCheck.vue';


let $emit = defineEmits(['save','closeDig']);
const props = defineProps({
    initMsg: { type: Object, default: () => ({}) },
})
const viewLayoutModeList = ref<Dict[]>([]);
const dictList = autoDict();
onMounted(() => {
    init()
})

const subData = reactive({
    startCheck: {} as { method?: any[], risk?: any[] },
    secondConfirm: {} as { method?: any[], risk?: any[] },
    index: props.initMsg.index,
    isRead: props.initMsg.isRead,
    pageSrc: 'node'
});
const init = () => {
    // 初始化时从传入的数据中获取初始值
    if (props.initMsg && props.initMsg.row) {
        subData.startCheck = {...props.initMsg.row.startCheck} || {};
        subData.secondConfirm = {...props.initMsg.row.secondConfirm} || {};
    }
    // console.log('sss:', props.initMsg, subData);
    viewLayoutModeList.value = dictList.VIEW_LAYOUT_MODE.list;
};

const activeName = ref('start');
const cancel = ()=>{
    $emit('closeDig');
}

const refStart = ref();
const refConfirm = ref();

// 保存当前标签页数据
const saveCurrentTabData = () => {
    // console.log('保存:', activeName.value);
    if(activeName.value === 'start' && refStart.value){
        subData.startCheck = refStart.value.save() || {};
    } else if(activeName.value === 'Confirm' && refConfirm.value){
        subData.secondConfirm = refConfirm.value.save() || {};
    }
    // console.log('保存数据:', subData);
}

const handleClick1 = (tab: any) => {
    // 切换前保存当前标签页数据
    saveCurrentTabData();
    activeName.value = tab.paneName;
}

const onSubmit = async () => {
    // 提交前保存当前激活标签页的数据
    saveCurrentTabData();
    
    // 检查参数映射中是否存在必填参数未填写的情况
    let risk1 = subData.startCheck.risk && subData.startCheck.risk.length>0 ? subData.startCheck.risk : [];
    let risk2 = subData.secondConfirm.risk&& subData.secondConfirm.risk.length>0 ? subData.secondConfirm.risk : [];

    for (let i = 0; i < risk1.length; i++) {
        const item = risk1[i];
        if (item?.params && Array.isArray(item.params)) {
            const invalidParam = item.params.find((param: { isNotNull: number; columnPath: string; }) => param.isNotNull === 1 && param.columnPath === '');
            if (invalidParam) {
                ElMessage.error('启动限制-风控项目-参数映射中存在必填参数未填写');
                return false;
            }
        }
    }

    for (let i = 0; i < risk2.length; i++) {
        const item = risk2[i];
        if (item?.params && Array.isArray(item.params)) {
            const invalidParam = item.params.find((param: { isNotNull: number; columnPath: string; }) => param.isNotNull === 1 && param.columnPath === '');
            if (invalidParam) {
                ElMessage.error('提示确认-风控项目-参数映射中存在必填参数未填写');
                return false;
            }
        }
    }

    $emit('save', subData);
    $emit('closeDig');
}
</script>

<style scoped lang="scss">
.elResetBody :deep(.demo-tabs1){ 
    .el-tab-pane{ height: 100% ;}
    &.el-tabs--border-card > .el-tabs__content{ padding: 15px 0;}
}
</style>
